const Modal = React.createClass({
    getInitialState(){
        return {
            in: ''
        };
    },
    getDefaultProps(){
        return {
            open: false
        }
    },
    componentWillReceiveProps(nextProps) {
        const self = this;
        if (nextProps.open) {
            setTimeout(() => {
                self.setState({
                    in: 'in'
                })
            }, 0)
        } else {
            self.setState({
                in: ''
            })
        }
    },
    render(){
        let self = this;

        return (
            <div>
                <div className={" modal fade " + (self.state.in || '')}
                     style={{display: (this.props.open ? 'block' : 'none')}}>
                    <div className={this.props.className + " modal-dialog" }>
                        <div className="modal-content">
                            {this.props.children}
                        </div>
                    </div>
                </div>
                {this.props.open ?
                    <div className={"modal-backdrop fade in" }></div> : ''}
            </div>
        )
    }
});

const Header = React.createClass({
    propTypes: {
        onclose: React.PropTypes.func,
    },
    render(){
        return (
            <div className="modal-header">
                <button type="button" className="close" onClick={()=> {
                    this.props.onclose()
                }}><span>×</span><span
                    className="sr-only">关闭</span></button>
                <h4 className="modal-title" id="myModalLabel">{this.props.children}</h4>
            </div>
        );
    }
})
const Body = React.createClass({
    render(){
        return (
            <div
                className="modal-body"
                style={{
                    position: "relative",
                    padding: "18px",
                    maxHeight: window.innerHeight * 0.8,
                    overflow: "auto",
                }}>
                {this.props.children}
            </div>
        );
    }
})
const Footer = React.createClass({

    getDefaultProps(){
        return {
            onconfirm: function () {

            },
            onclose: function () {

            }
        }
    },
    render(){
        if (this.props.children) {
            return <div className="modal-footer">{this.props.children}</div>
        }
        return (
            <div className="modal-footer">
                <button type="button" className="btn btn-default" onClick={()=> {
                    this.props.onclose();
                }}>
                    关闭
                </button>
                <button type="button" className="btn btn-primary" onClick={()=> {
                    this.props.onconfirm();
                }}>确定
                </button>
            </div>
        );
    }
});
Modal.Header = Header;
Modal.Body = Body;
Modal.Footer = Footer;
export default Modal;
